<template>
  <div id="data-view">
    <dv-full-screen-container>
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div class="content-box" v-else>
        <dv-border-box-11 title="SSM平台数据展示">
          <div class="bottom-box">
            <div class="left-box">
              <div class="item-1">
                <h3>应用访问频次</h3>
                <div class="echart1"></div>
                <dv-decoration-2 style="height: 67px" />
              </div>
              <div class="item-2">
                <h3>应用租户开通统计</h3>
                <div class="echart2"></div>
              </div>
            </div>
            <div class="middle-box">
              <div class="map1"></div>
              <div class="map2"></div>
              <div class="map3"></div>
              <map-chart></map-chart>
            </div>
            <div class="right-box">
              <div class="item-1">
                <RankingBoard></RankingBoard>
              </div>
              <div class="item-2">
                <ScrollBoard></ScrollBoard>
              </div>
            </div>
          </div>
        </dv-border-box-11>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import * as echarts from "echarts";
import MapChart from "./mapchart.vue";
import RankingBoard from "./rankingBoard.vue";
import ScrollBoard from "./scrollBoard.vue";
export default {
  name: "DataView2",
  components: {
    MapChart,
    RankingBoard,
    ScrollBoard,
  },
  data() {
    return {
      loading: false,
    };
  },
  mounted() {
    this.initData();
  },
  created() {},
  methods: {
    initData() {
      let that = this;
      setTimeout(() => {
        // that.loading = false;
        this.getOptions1();
        this.getOptions2();
      }, 3000);
    },
    getOptions2() {
      var myChart = echarts.init(document.querySelector(".echart2"));
      var option = {
        animation: false,
        color: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {d}%",
        },
        legend: {
          // 垂直居中,默认水平居中
          // orient: 'vertical',
          bottom: 0,
          // 小图标的宽度和高度
          itemWidth: 14,
          itemHeight: 14,
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "14",
          },
        },
        series: [
          {
            name: "占比",
            type: "pie",
            // 设置饼形图在容器中的位置
            center: ["50%", "42%"],
            // 修改饼形图大小，第一个为内圆半径，第二个为外圆半径
            radius: ["40%", "60%"],
            avoidLabelOverlap: true,
            // 图形上的文字
            label: {
              show: true,
              // position: "center",
              fontSize: 12,
              color: "#fff",
            },
            // 链接文字和图形的线
            labelLine: {
              show: true,
              showAbove: true,
            },
            data: [
              {
                value: 4,
                name: "FMS",
              },
              {
                value: 1,
                name: "HRIS",
              },
              {
                value: 2,
                name: "OUTLOOK",
              },
              {
                value: 1.2,
                name: "TEAMS",
              },
              {
                value: 1.8,
                name: "OA",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("legendselectchanged", function (params) {
        myChart.setOption({
          legend: { selected: { [params.name]: true } },
        });
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    getOptions1() {
      // 1.实例化对象
      var myChart = echarts.init(document.querySelector(".echart1"));
      // 2.指定配置项和数据
      var option = {
        color: ["#1370fb"],// ["#1089E7"],
        // 提示框组件
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        // 修改图表位置大小
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        // x轴相关配置
        xAxis: [
          {
            type: "category",
            data: ["HRIS", "OUTLOOK", "FMS", "TEAMS", "OA"],
            axisTick: {
              alignWithLabel: true,
            },
            // 修改刻度标签，相关样式
            axisLabel: {
              color: "rgba(255,255,255,0.8)",
              fontSize: 10,
            },
            // x轴样式不显示
            axisLine: {
              show: false,
            },
          },
        ],
        // y轴相关配置
        yAxis: [
          {
            type: "value",
            // 修改刻度标签，相关样式
            axisLabel: {
              color: "rgba(255,255,255,0.6)",
              fontSize: 12,
            },
            // y轴样式修改
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.6)",
                width: 2,
              },
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },
          },
        ],
        // 系列列表配置
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "35%",
            // ajax传动态数据
            data: [459, 60, 120, 90, 360],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5,
            },
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
  #dv-full-screen-container {
    box-sizing: border-box;
    padding: 5px;
    background-image: url("./images/bg.jpg");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }
  .content-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .dv-decoration-11 {
      width: 200px;
    }
    .bottom-box {
      display: flex;
      padding: 60px 20px 10px 20px;
      box-sizing: border-box;
      height: 100%;
      .left-box {
        flex-direction: column;
        flex: 1;
        position: relative;
        width: 25%;
        h3 {
          margin: 0;
          padding: 0;
        }
        // border: 1px solid blue;
        .item-1 {
          height: 50%;
          width: 100%;
          justify-content: center;
          flex-grow: 0;
          flex-direction: column;
          text-align: center;
          .echart1 {
            height: 80%;
          }
        }
        .item-2 {
          height: 50%;
          width: 100%;
          justify-content: center;
          flex-grow: 0;
          flex-direction: column;
          text-align: center;
          .echart2 {
            height: 80%;
          }
        }
      }
      .middle-box {
        width: 40%;
        position: relative;
        .map1 {
          width: 518px;
          height: 518px;
          position: absolute;
          top: 42%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: url(./images/map.png);
          background-size: 100% 100%;
          opacity: 0.3;
        }
        .map2 {
          position: absolute;
          top: 42%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 643px;
          height: 643px;
          background: url(./images/lbx.png);
          background-size: 100% 100%;
          animation: rotate1 15s linear infinite;
          opacity: 0.6;
        }
        .map3 {
          position: absolute;
          top: 42%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 566px;
          height: 566px;
          background: url(./images/jt.png);
          background-size: 100% 100%;
          animation: rotate2 15s linear infinite;
        }
        .echart3 {
          position: absolute;
          top: 0;
          left: 0;
          height: 810px;
          width: 100%;
        }
        @keyframes rotate1 {
          from {
            transform: translate(-50%, -50%) rotate(0deg);
          }
          to {
            transform: translate(-50%, -50%) rotate(360deg);
          }
        }
        @keyframes rotate2 {
          from {
            transform: translate(-50%, -50%) rotate(360deg);
          }
          to {
            transform: translate(-50%, -50%) rotate(0deg);
          }
        }
      }
      .right-box {
        width: 35%;
        flex-direction: column;
        flex: 1;
        position: relative;
        .item-1 {
          height: 50%;
          width: 100%;
          justify-content: center;
          flex-grow: 0;
          flex-direction: column;
          text-align: center;
        }
        .item-2 {
          height: 50%;
          width: 100%;
          justify-content: center;
          flex-grow: 0;
          flex-direction: column;
          text-align: center;
        }
      }
    }
  }
}
</style>
